<template>
    <div>
        <el-container>
            <el-header>
                <Nav></Nav>
            </el-header>
            <el-container class="middle">
                <el-main>
                    <div class="author">
                        <el-row>
                            <el-col :span="22">

                            </el-col>
                            <el-col :span="22">

                            </el-col>
                        </el-row>
                    </div>
                    <div class="mblog">
                        <h2> {{ article.title }}</h2>
                        <el-link icon="el-icon-edit" v-if="ownBlog">
                            <router-link :to="{name: 'BlogEdit', params: {blogId: article.id}}" >
                                编辑
                            </router-link>
                        </el-link>
                        <el-divider></el-divider>
                        <div class="markdown-body" v-html="article.content"></div>
                    </div>
                    <div class="comment">
                        <el-row>
                            <el-col :span="21">
                                <el-input
                                        class="commentinput"
                                        type="textarea"
                                        placeholder="请留下您的评论"
                                        :rows="3"
                                        v-model="comment">
                                </el-input>
                            </el-col>
                            <el-col :span="3">
                                <el-button style="margin:15px 0 0 10px" type="danger" round  @click="addComment()" >发布</el-button>
                            </el-col>
                        </el-row>
                        <el-row>

                        </el-row>
                    </div>
                    <div class="commenttext">
                        <el-row>
                            <el-alert
                                    title="精彩评论"
                                    type="info"
                                    :closable="false"
                                    effect="dark">
                            </el-alert>
                        </el-row>
                        <el-row :key="comme.id" v-for="comme in commentList">
                            <el-row>
                                <el-col :span="1">
                                    <el-avatar size="small" :src="comme.userAvatar"></el-avatar>
                                </el-col>
                                <el-col :span="4">
                                    <p style="margin: 5px 0px 0px 0px;font-size: 16px">{{comme.userName}}</p>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="23" :offset="1">
                                    <p style="font-size: 16px">{{comme.content}}</p>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="2" :offset="1">
                                    <svg class="icon" width="16px" height="16.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#8a8a8a" d="M884.875894 423.143253 646.970506 423.143253c92.185562-340.464205-63.516616-357.853247-63.516616-357.853247-65.993017 0-52.312436 52.182476-57.3031 60.881602 0 166.502152-176.849824 296.971645-176.849824 296.971645l0 472.171899c0 46.607504 63.516616 63.393819 88.433098 63.393819l357.452111 0c33.641191 0 61.036122-88.224344 61.036122-88.224344 88.434122-300.70569 88.434122-390.177444 88.434122-390.177444C944.657442 418.179195 884.875894 423.143253 884.875894 423.143253L884.875894 423.143253 884.875894 423.143253zM884.875894 423.143253M251.671415 423.299819 109.214912 423.299819c-29.420053 0-29.873378 28.89612-29.873378 28.89612l29.420053 476.202703c0 30.309306 30.361495 30.309306 30.361495 30.309306L262.420223 958.707948c25.686009 0 25.458835-20.049638 25.458835-20.049638L287.879058 459.411271C287.879058 422.837284 251.671415 423.299819 251.671415 423.299819L251.671415 423.299819 251.671415 423.299819zM251.671415 423.299819" /></svg>
                                    <span style="color: #333333;"> {{comme.praiseNum}}</span>
                                </el-col>
                                <el-col :span="2">
                                    <svg class="icon" width="16px" height="13.33px" viewBox="0 0 1229 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#8a8a8a" d="M1229.240724 1023.924013S1111.384981 284.495102 512.151974 284.495102V0L0 512l512.151974 477.805877V661.694271c325.224102 0 547.105966 31.610567 717.012763 362.305729z"  /></svg>
                                    <span style="color: #333333;" @click="replyWin(comme.id,comme.userId,comme.userName)"> 回复</span>
                                </el-col>
                            </el-row>
                            <el-row :key="rep.id" v-for="rep in comme.children">
                                <el-col :span="23" :offset="1">
                                    <el-row>
                                        <el-col :span="1">
                                            <el-avatar size="small" :src="rep.userAvatar"></el-avatar>
                                        </el-col>
                                        <el-col :span="6">
                                            <p style="margin: 5px 0px 0px 0px;font-size: 16px">{{rep.userName}}<span style="color: #8590a6"> 回复 </span>{{rep.replyUserName}}</p>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="23" :offset="1">
                                            <p style="font-size: 16px">{{rep.content}}</p>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="2" :offset="1">
                                            <svg class="icon" width="16px" height="16.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#8a8a8a" d="M884.875894 423.143253 646.970506 423.143253c92.185562-340.464205-63.516616-357.853247-63.516616-357.853247-65.993017 0-52.312436 52.182476-57.3031 60.881602 0 166.502152-176.849824 296.971645-176.849824 296.971645l0 472.171899c0 46.607504 63.516616 63.393819 88.433098 63.393819l357.452111 0c33.641191 0 61.036122-88.224344 61.036122-88.224344 88.434122-300.70569 88.434122-390.177444 88.434122-390.177444C944.657442 418.179195 884.875894 423.143253 884.875894 423.143253L884.875894 423.143253 884.875894 423.143253zM884.875894 423.143253M251.671415 423.299819 109.214912 423.299819c-29.420053 0-29.873378 28.89612-29.873378 28.89612l29.420053 476.202703c0 30.309306 30.361495 30.309306 30.361495 30.309306L262.420223 958.707948c25.686009 0 25.458835-20.049638 25.458835-20.049638L287.879058 459.411271C287.879058 422.837284 251.671415 423.299819 251.671415 423.299819L251.671415 423.299819 251.671415 423.299819zM251.671415 423.299819" /></svg>
                                            <span style="color: #333333;"> {{rep.praiseNum}}</span>
                                        </el-col>
                                        <el-col :span="2">
                                            <svg class="icon" width="16px" height="13.33px" viewBox="0 0 1229 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#8a8a8a" d="M1229.240724 1023.924013S1111.384981 284.495102 512.151974 284.495102V0L0 512l512.151974 477.805877V661.694271c325.224102 0 547.105966 31.610567 717.012763 362.305729z"  /></svg>
                                            <span style="color: #333333;" @click="replyWin(comme.id,rep.userId,rep.userName)"> 回复</span>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-row>
                        <el-divider></el-divider>
                    </div>
                </el-main>
                <el-aside width="300px">
                    <el-card class="box-card">
                        <el-row>
                            <h4 style="text-align: left;margin: 2px 5px;">点击排行</h4>
                            <el-divider></el-divider>
                            <h5 style="margin: 3px 5px; text-align: left" v-for="article in readTopList" @click="toDetail(article.id)">
                                {{article.title}}
                            </h5>
                        </el-row>
                    </el-card>
                    <el-card style="background-color: #8c939d">
                        <el-row>
                            <el-avatar class="login"  :src="author.avatar" @click.native="toSpace()" ></el-avatar>
                            <h4 style="text-align: center;margin: 2px 5px;">{{author.userName}}</h4>
                        </el-row>
                    </el-card>
<!--                    <el-card class="box-card">-->
<!--                        <span>广告位</span>-->
<!--                    </el-card>-->
                </el-aside>
            </el-container>
            <el-footer>备案号：冀ICP备19020033号</el-footer>

            <el-dialog title="回复" :visible.sync="replyVisible">
                <el-form>
                    <el-input type="textarea" autosize v-model="replyContent" autocomplete="off"></el-input>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button round @click="replyVisible = false">取 消</el-button>
                    <el-button type="danger" round @click="reply()" >发 布</el-button>
                </div>
            </el-dialog>
        </el-container>
    </div>
</template>

<script>
    import 'github-markdown-css'
    import Header from "../components/Header";
    import Nav from "../components/Nav";
    export default {
        name: "ArticleDetail.vue",
        components: {Header,Nav},
        data() {
            return {
                hasLogin:!!localStorage.getItem("token"),
                id: this.$route.query.id,
                replyVisible:false,
                article: {

                },
                comment:"",
                replyContent:"",
                ownBlog: false,
                commentList:[],
                replyId:'',
                replyUserId:'',
                replyUserName:'',
                readTopList:[],
                author:{}
            }
        },
        methods: {
            getAuthor(username){
                const _this = this
                this.$request({
                    url: '/user/info',
                    method: 'post',
                    params:{
                        username:username,
                    }
                }).then(res => {
                    if(res.code === 200){
                        _this.author = res.data
                    }
                })
            },
            visitNum(){
                const _this = this
                this.$request({
                    url: '/article/visit',
                    method: 'post',
                    params:{
                        id:this.id,
                    }
                })
            },
            getReadList(){
                const _this = this
                this.$request({
                    url: '/article/top',
                    method: 'post',
                    params:{
                        size: 10,
                    }
                }).then(res => {
                    if(res.code === 200){
                        _this.readTopList = res.data
                    }
                })
            },
            reply(){
                const _this = this
                if(!this.replyContent){
                    this.$message({
                        message: '回复内容为空',
                        type: 'warning'
                    });
                    return;
                }
                this.$request({
                    url: '/comment/rep',
                    method: 'post',
                    params:{
                        articleId:this.id,
                        content:this.replyContent,
                        replyId:this.replyId,
                        replyUserId:this.replyUserId,
                        replyUserName:this.replyUserName,
                    }
                }).then(res => {
                    this.replyVisible = false
                    if(res.code === 200){
                        this.replyContent = "",
                        this.replyId =  "";
                        this.replyUserId = "";
                        this.replyUserName = "";
                        _this.getCommentList()
                    }
                })
            },
            replyWin(repId,replyUserId,repUserName){
                if(!this.hasLogin){
                    this.$router.push("/login")
                    return;
                }
                this.replyVisible = true;
                this.replyId = repId;
                this.replyUserId = replyUserId;
                this.replyUserName = repUserName;
            },
            addComment(){
                if(!this.hasLogin){
                    this.$router.push("/login")
                    return;
                }
                const _this = this
                if(!this.comment){
                    this.$message({
                        message: '评论内容为空',
                        type: 'warning'
                    });
                    return;
                }
                this.$request({
                    url: '/comment/add',
                    method: 'post',
                    params:{
                        articleId:this.id,
                        content:this.comment
                    }
                }).then(res => {
                    if(res.code === 200){
                        this.comment = "",
                        _this.getCommentList()
                        _this.commentNum()
                    }
                })
            },
            getCommentList(){
                const _this = this
                this.$request({
                    url: '/comment/list',
                    method: 'post',
                    params:{
                        articleId:this.id
                    }
                }).then(res => {
                    if(res.code === 200){
                        _this.commentList = res.data
                    }
                })
            },
            getArticle() {
                const _this = this
                this.$request({
                    url: '/article/info',
                    method: 'post',
                    params:{
                        id:this.id
                    }
                }).then(res => {
                    if(res.code === 200){
                        _this.article = res.data
                        _this.getAuthor(_this.article.userName);
                        // const MardownIt = require("markdown-it")({
                        //     breaks : true,
                        // });
                        // const md = new MardownIt()
                        // const result = md.render(_this.article.content);
                        // console.log(result)
                        // _this.article.content = result
                    }
                })
            },
            commentNum(){
                const _this = this
                this.$request({
                    url: '/article/Comment',
                    method: 'post',
                    params:{
                        id:this.id,
                    }
                })
            },
            toSpace(){
                this.$router.push({
                    path:"/space",
                    query:{
                        userId:this.author.id,
                    }
                })
            },
            toDetail(articleId){
                this.$router.push({
                    path:"/detail",
                    query:{
                        id:articleId,
                    }
                })
                this.visitNum()
                const _this = this
                this.$request({
                    url: '/article/info',
                    method: 'post',
                    params:{
                        id:articleId
                    }
                }).then(res => {
                    if(res.code === 200){
                        _this.article = res.data
                        _this.getAuthor(_this.article.userName);
                    }
                })

                this.$request({
                    url: '/comment/list',
                    method: 'post',
                    params:{
                        articleId:articleId
                    }
                }).then(res => {
                    if(res.code === 200){
                        _this.commentList = res.data
                    }
                })
            }
        },
        created() {
            this.getArticle()
            this.getCommentList()
            this.getReadList()
            this.visitNum()
        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: white;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: white;
        color: #333;
        text-align: center;
    }
    .middle {
        padding: 0;
        margin: 5px auto;
        width: 1200px;
        min-height: 1200px;
        background-color: white;
        color: #333;
    }
    .el-aside .el-card{
        margin: 6px 3px;
        /*min-height: 200px;*/
        /*max-height: 500px;*/
    }

    .mblog {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        max-width: 900px;
        min-height: 700px;
        padding: 20px 15px;
        margin: 0 auto;
    }

    .comment{
        /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);*/
        max-width: 900px;
        margin: 10px auto;
    }

    .commentinput{
        background-color: #8c939d;
    }

    .commenttext{
        max-width: 900px;
        margin: 10px auto;
    }
</style>
